import type { FC } from 'react';
import { View, Text } from 'react-native';
import Card from '../Card';
import styles from './styles';

type ListItemType = {
  key: string;
  label: string;
  content: string;
}

type ListItemsProps = {
  items: ListItemType[];
}

const ListItems: FC<ListItemsProps> = (props) => {
  const { items } = props;
  return (
    <Card>
      <View style={styles.items}>
        {items.map((item, i) => {
          const total = items.length;
          const isFirst = i === 0;
          const isLast = total - 1 === i;
          return (
            <View
              key={item.key}
              style={[
                styles.item,
                isFirst && styles.first,
                isLast && styles.last
              ]}
            >
              <Text style={styles.itemTitle}>
                {item.label}
              </Text>
              <Text style={styles.itemValue}>
                {item.content}
              </Text>
            </View>
          );
        })}
      </View>
    </Card>
  );
}

export default ListItems;